2.2 Frontend Web Technologies - Overview

    
  1. How to describe content and structure of documents - HTML
  2. How to describe presentation and styling of documents - CSS
    • What does CSS stand for?
    • What is the main purpose of CSS?
    • Three types how to impose styles?    inline, internal, external
    • Inline styling? 
      <div style='color:Blue'>
    <p>If you are willing to get more, you will get more.</p>
</div>
      Trial 1: Let's try the above example, with the following. (Copy, Paste, Submit)


    • Internal/external styling - What are CSS selectors? 
      • <style>
    selector {
        property: ...;
        ...
    }
</style>
      • Basically there are four types of selectors, and pseudo selectors. What are they?
        • Class of elements: .class
        • Id of an element: #id
        • Type of elements, such as p, a, div, ul, ...
        • Attributes: [...]
        • For pseudo selectors, read the first paragraph in CSS Pseudo-classes. What does it say?
      • Combination of the above selectors using combinators. Combinators?
        • list: .target-1, p
        • children: div > p
        • descendent: ul#menu li
        • siblings: #name ~ a
      • Read 'CSS Selectors' in CSS Selector Reference.
      • Here is a great suggestion - The 30 CSS Selectors you Must Memorize.
    • What is CSS3?
    • Are all the CSS properties inherited to descendants? 
      <div ???='color:Blue; position:relative; left:50px'>
    Test
    <p id='test-paragraph-1'>Hmmmm</p> <!-- What color? Position? -->
</div>
      Trial 2: Let's try the above example, with the following. You can also test the example using http://cs.tru.ca/~mlee/comp3540/Software/runcode.php.


  3. How to allow programs to dynamically access/update the content, structure and style of documents - DOM
    • What does DOM stand for?
    • What is the main purpose of DOM?
      • Example
      • Read 'What is the Document Object Model?' and 'Why the Document Object Model?' in Document Object Model (DOM).
      • Another good reference - JavaScript HTML DOM
      • For each HTML element, you can find all necessary data from DOM.
      • DOM is represented by the object, document, in [client-side] JavaScript code.
    • Note that the window environment is represented by the object, window, in [client-side] JavaScript code.
    • Give an example of JavaScript code to select an HTML element and to change an attribute value or a CSS(, i.e., style) property value. E.g., text color. 
      (document.getElementById('test-paragraph-2')).style.color = 'Red';  // an HTML DOM object
      Trial 3: Let's try the above example, with the following.


  4. How to dynamically access/update the content, structure and style of documents - JavaScript, jQuery, and jQuery UI
    • What is the purpose of JavaScript?
      • Read 'The purpose of JavaScript is to solve this problem' in What is JavaScript Used For?.
      • Read all in JavaScript and HTML to find how they work together!
      • How to connect HTML objects to JavaScript? How to access HTML objects from JavaScript?
        • Basically JavaScript code reacts to events such as mouse, keyboard, timer, communication, and system. Here are some example events.
        • From an element to JavaScript function, e.g, <button type='button' onclick='show();'>Show</button>, or
        • From JavaScript using the id of an element, e.g., document.getElementById(id).addEventListener(event, eventlistener);
        • The above two event listener registration methods are called inline and W3C models respectively. What is the traditional model?
    • The relations among JavaScript, jQuery, and jQuery UI are ...
      • jQuery is a JavaScript library.
      • Read 'What is jQuery' in jQuery - write less, do more.
      • jQuery UI is a jQuery library for ...
      • Read the first paragraph in jQuery User Interface.
      • There some other very useful frameworks, such as T3PO, AngularJS, and Backbone.

  5. Learning outcomes
    • Explain the roles of HTML.
    • Explain the roles of CSS.
    • Explain how CSS can be used to control HTML objects.
    • Explain what DOM is.
    • Explain how JavaScript can be used to control HTML objects.
    • Explain the relations among JavaScript, jQuery, and jQuery UI.
    • Explain the purposes of JavaScript, jQuery, and jQuery UI.